<template>
  <div class="pad-memo">
    <svg
      width="35px"
      height="35px"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      aria-labelledby="chatAddIconTitle"
      stroke="#000"
      stroke-width="1.3714285714285714"
      stroke-linecap="square"
      stroke-linejoin="miter"
      fill="none"
      color="#000"
    >
      <title id="chatAddIconTitle">New chat</title>
      <path d="M21 4V17H13L7 21V17H3V4H21Z" />
      <path d="M15 10H9" />
      <path d="M12 7V13" />
    </svg>
    <div class="contain-svg">
      <p>备注:</p>
    </div>

    &nbsp;&nbsp;
    <!-- 使用ref得到input框的引用 -->
    <input
      type="text"
      @input="InputNote"
      ref="Input"
      placeholder="请输入备注信息...."
    />
  </div>
</template>

<script setup lang="ts">
import { inject, ref } from "vue";
// 引入pinia的store
import { useTagLists } from "./../../store";
// 引入发布订阅中介mitt
// 通过最顶层的app组件将mitter组件通信工具注入 子组件可以通过inject取出调用
// 不需要通过挂载到app这个vue实例上的方法 使用provide更简单
const mitter: any = inject("mitter");

// 钩子函数引入pinia的store
let store = useTagLists();
// ref得到input输入框的引用
const Input: any = ref(null);

// 在input中输入信息就会实时的写入到pinia的store中
const InputNote = (e: any) => {
  const Info: string = e.target.value;
  // console.log(Info);
  store.addNotes(Info);
};

// 这个事件ClearNotesInput再数字键盘NumberPad中点击Ok触发
// 触发效果会把 当前notes组件input输入框内容情况
mitter.on("ClearNotesInput", () => {
  // Input.value拿到这个标签 Input.value.value拿到这个标签元素的value
  Input.value.value = "";
});
</script>

<style scoped lang="less">
.pad-memo {
  font-size: 20px;
  line-height: 7vh;
  height: 7vh;
  display: flex;
  align-items: center;
  background-color: rgb(199, 208, 211);
  padding: 10px 0px 10px 30px;

  p {
    margin-left: 10px;
  }

  input {
    border: none;
    background: transparent;
    width: 70%;
  }
}
</style>
